<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        * {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        @font-face{
            font-family: QS-R;
            src:url(./font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(./font/Quicksand-Medium.ttf);
        }
        .nav .nav-content {
            width: 700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .nav .nav-content h1{
            font-family: QS-R;
            text-align:right;
        }
        .nav .wel-content div {
            font-size: 32px;
            font-family: QS-R;
            font-weight: 900;
            text-align: right;
        }
    </style>
    <style>
        .split-line {
            width:700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .dot {
            font-size:0;
            border-radius: 50%;
            border: 5px solid black;

        }
    </style>
    <style>
        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main {
            width:700px;
            margin: 50px auto 0;
        }
        .main .content {
            float:left;
            font-family: QS-R;
            font-size:20px;
            font-weight:bold;
        }
        .main .left-content {
            margin-left: 88px;
        }

        .main .left-content .type-container {
            width:160px
        }

        .main .left-content .type-container .type-title {
            border:6px solid #004add
        }

        .main .left-content .type-container .type-list {
            border:6px solid #004add;
            border-top:1px solid #004add;
        }

        .main .left-content .type-container .type-list .type-item {
            margin:10px 0
        }

        .main .left-content .type-container .type-title span {
            margin: 0 8px;
            color: #1b6d85;
            top:5px
        }

        .main .right-content {
            margin-left: 25px;
        }

        .main .right-content .topic-container .topic-title span {
            margin: 0 8px;
            color: #1b6d85;
            top:5px
        }
        .main .right-content .topic-container {
            width:350px
        }
        .main .right-content .topic-container .topic-title {
            border:6px solid #004add
        }
        .main .right-content .topic-container .topic-list,.add-topic {
            border:6px solid #004add;
            border-top:1px solid #004add;
            text-align: center;

        }
        .main .right-content .topic-container .add-topic{
            color:mediumblue;
        }
        .main .right-content .topic-container .back {
            width:170px;
            font-family: QS-R;
            font-size: 16px;
            text-align: center;
            background-color:mediumblue;
            color:white;
            border-radius: 5px;
            margin-left: 180px;
            margin-top: 86px;
        }



    </style>
    <style>
        .add-topic:hover{
            cursor: pointer;
        }
        .glyphicon-plus:active{
            top:2px;
        }
        .create-topic-name {
            position:absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 12px;
            height: 170px;
            width: 325px;
            z-index: 999;
            text-align: center;
        }

        .input-name {
            width: 280px;
            height: 40px;
            font-family:QS-M;
            margin: 0 auto;
            font-size: 25px;
            color: black;
            background-color:rgba(157,157,157,.15);
            background-position: 15px;
            background-repeat: no-repeat;
            background-size: 35px 35px;
            border:none;
            border-radius: 8px;
        }
        .button {
            width:126px;
            height:30px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
            margin-left: 155px;
            margin-top: 31px;
        }
        .text::-webkit-input-placeholder{

            font-family: QS-R;
            font-size: 24px;
        }
        .create-topic-bar {
            width: 280px;
            margin: 0 auto;
            margin-top: 42px;
        }
        .type-item:hover{
            cursor: pointer;
            background-color: #4472C4;
        }

        .topic-item:hover {
            cursor: pointer;
            background-color: #4472C4;
        }
    </style>
</head>
<body>
    <div class="create-topic-name" style="display: none">
        <div class="create-topic-bar">
            <input type="hidden" id="uniId" th:value="${uniId}">
            <input type="hidden" id="courseId" th:value="${courseId}">
            <input type="hidden" id="courseGroup" th:value="${courseGroup}">
            <input type="text" id="topicName" name="login-username" class="input-name text"><br/>
            <input type="button" id="submit" class="button back" Value="Submit">
        </div>

    </div>
    <div class="nav">
        <div class="nav-content">
            <div class="logo"><img src="/image/LOGO.png"  style="width:222px;height:114px;"></div>
            <div class="wel-content">
                <div>Welcome!</div>
                <div th:text="|${courseId} G${courseGroup}|">SSK3313 G4</div>
            </div>
        </div>
    </div>
    <div class="split-line">
        <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span>
    </div>
    <div class="main clearfix">
        <div class="content left-content">
            <div class="type-container" style="position: relative">
                <div id="type-select" class="type-title">
                    <span id="type-icon" class="glyphicon glyphicon-triangle-bottom"></span>Type</div>
                <div id="type-list" class="type-list">
                    <div class="type-item"><span>Message</span></div>
                    <div class="type-item"><span>Task</span></div>
                    <div class="type-item"><span>Material</span></div>
                    <div class="type-item"><span>Video</span></div>
                    <div class="type-item"><span>Test</span></div>
                    <div class="type-item"><span>Other</span></div>
                </div>
            </div>
        </div>
        <div class="content right-content">
            <div class="topic-container">
                <div class="topic-title"><span class="glyphicon glyphicon-triangle-bottom"></span>Topic</div>
                <div class="topic-list">
                    <div th:each="courseTopic:${courseTopics}" class="topic-item" th:id="|${courseTopic.topicId}-${courseTopic.uniId}-${courseTopic.courseId}-${courseTopic.courseGroup}-${courseTopic.topicName}|">
                        <span th:text="${courseTopic.topicName}">WELCOME</span>
                    </div>
<!--                    <div class="topic-item"><span>TOPIC 1:INTRO</span></div>-->
<!--                    <div class="topic-item"><span>TOPIC 2:ER-DIAGRAM</span></div>div-->
                </div>
                <div class="add-topic">
                    <span class="glyphicon glyphicon-plus"></span>
                </div>
                <input hidden="hidden" id="backUrl" th:value="${backUrl}">
                <div  class="back" onclick="document.location=document.getElementById('backUrl').value">
                    <div class="btn">Back</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $("#type-select").click(function () {
            let cls = $("#type-icon").attr("class");
            if (cls==="glyphicon glyphicon-triangle-bottom"){
                $("#type-icon").attr("class","glyphicon glyphicon-triangle-right")
                document.getElementById("type-list").style.display="none";
            }else {
                $("#type-icon").attr("class","glyphicon glyphicon-triangle-bottom")
                document.getElementById("type-list").style.display="block";
            }
        })

        $(".add-topic").click(function () {
            $(".create-topic-name").toggle()
        })

        $("#submit").click(function () {

            $.ajax({
                url:"/course/createCourseTopic",
                method:"POST",
                dataType:"JSON",
                data:{
                    courseId:document.getElementById("courseId").value,
                    uniId:document.getElementById("uniId").value,
                    courseGroup:document.getElementById("courseGroup").value,
                    topicName:document.getElementById("topicName").value
                },
                success:function (data) {
                    if (data.code===true){
                        let newTopic = data.data;
                        let newEle = $(`<div class="topic-item" id="${newTopic.topicId}-${newTopic.uniId}-${newTopic.courseId}-${newTopic.courseGroup}-${newTopic.topicName}"><span>${newTopic.topicName}</span></div>`)
                        $('.topic-list').append(newEle);
                        $(".create-topic-name").toggle()
                        alert("create success!")
                    }else {
                        $(".create-topic-name").toggle()
                        alert(data.errMsg)

                    }
                }
            })
        })

        $(".topic-item").click(function (event) {
            let _this = event.currentTarget;
            let key = $(_this).attr("id");
            let strList = key.split('-');
            $.ajax({
                url:"/course/createItem",
                dataType: "JSON",
                method:"GET",
                data:{
                    topicId:strList[0],
                    uniId:strList[1],
                    courseId:strList[2],
                    courseGroup:strList[3],
                    topicName: strList[4]
                },
                success:function (data) {
                    if (data.code===true){
                        document.location = data.location;
                    }else {

                    }
                }
            })

        })
    </script>
</body>
</html>